import React from 'react'
import './index.less';
import { Image } from 'antd'
// import { Navigation, Autoplay, Mousewheel, Zoom } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
// import 'swiper/css';
import 'swiper/css/bundle';
import 'swiper/css/navigation';
import 'swiper/css/mousewheel'
import 'swiper/css/pagination';
import 'swiper/css/autoplay';
import 'swiper/css/zoom';
import SwiperCore, {
    Zoom, Navigation, Autoplay,
    Mousewheel
} from 'swiper';

SwiperCore.use([Zoom, Navigation, Autoplay, Mousewheel]);

const Swipers = () => {

    return (
        <div className='content'>
            <div className="contentmid">
                <Swiper
                    loop={true}
                    grabCursor={true}
                    navigation
                    zoom={true}
                    speed={1500}
                    autoplay={{
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: true
                    }}
                    mousewheel={{
                        invert: true,
                        releaseOnEdges: true,
                        sensitivity: 10
                    }}
                    autoHeight={true}
                    onSwiper={(swiper) => console.log(swiper)}
                    onSlideChange={() => console.log('slide change')}
                >
                    <SwiperSlide>
                        <div className="img_div">
                            <img src="http://p1.music.126.net/ZYLJ2oZn74yUz5x8NBGkVA==/109951164331219056.jpg" width="100%" height="100%" alt="推荐" />
                            <div class="mask">
                            </div>
                        </div>
                    </SwiperSlide>
                    <SwiperSlide>
                        <div className="img_div">
                            <img src="http://p1.music.126.net/ZYLJ2oZn74yUz5x8NBGkVA==/109951164331219056.jpg" width="100%" height="100%" alt="推荐" />
                            <div class="mask">
                            </div>
                        </div>
                    </SwiperSlide>
                    <SwiperSlide>
                        <div className="img_div">
                            <img src="http://p1.music.126.net/ZYLJ2oZn74yUz5x8NBGkVA==/109951164331219056.jpg" width="100%" height="100%" alt="推荐" />
                            <div class="mask">
                            </div>
                        </div>
                    </SwiperSlide>
                    <SwiperSlide>
                        <div className="img_div">
                            <img src="http://p1.music.126.net/ZYLJ2oZn74yUz5x8NBGkVA==/109951164331219056.jpg" width="100%" height="100%" alt="推荐" />
                            <div class="mask">
                            </div>
                        </div>
                    </SwiperSlide>
                    <SwiperSlide>
                        <div className="img_div">
                            <img src="http://p1.music.126.net/ZYLJ2oZn74yUz5x8NBGkVA==/109951164331219056.jpg" width="100%" height="100%" alt="推荐" />
                            <div class="mask">
                            </div>
                        </div>
                    </SwiperSlide>
                </Swiper>
            </div>
        </div>
    );
}

export default Swipers